/* Importing the Poppins font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap");


/* Global Colors for Light Mode */
:root {
  --section-padding: 4rem 1rem; /* Padding for sections */
  --section-margin-bottom: 2rem; /* Margin bottom for sections */
  
  /* Default Dark Mode Colors */
  --background-color: #000000; /* Background color for sections */
  --text-color: #ffffff; /* Color for text */
  --link-color: #FE8EA8; /* Color for links */
  --button-color: #FE8EA8; /* Color for buttons */
  --profile-image-width: 300px; /* Default width for profile image container */
  --profile-image-height: 300px; /* Default height for profile image container */
  --profile-image-max-width: 400px; /* Max width for profile image container */
  --profile-image-height-large: 400px; /* Height for profile image container on larger screens */
  
  --photo-album-padding: 20px; /* Padding for photo album */
  --photo-grid-gap: 10px; /* Gap between photos */
  --photo-max-width: 100px; /* Max width for photos */
  --photo-expanded-width: 30vw; /* Expanded width for photos */
  --photo-expanded-video-width: 20vw; /* Expanded width for videos */
  --shadow-box-bg-color: #ffc0cb73; /* Light pink background for shadow box */
  --caption-color: #ffffff; /* White color for captions */
  --shadow-box-border-radius: 15px; /* Border radius for shadow box */
  --shadow-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for shadow box */
  --rounded-image-max-height: 600px; /* Max height for rounded images */
  
  --code-box-bg-color: #FFC0CB; /* Light pink for code box */
  --code-text-color: #333; /* Dark grey for code text */
  --scrollbar-thumb-color: #FE8EA8; /* Light pink for scrollbar handle */
  --body-bg-color: #000000; /* Black for body background */
  --header-bg-color: #864C5A; /* Dark pink for header */
  --nav-link-color: #212121; /* Dark grey for nav links */
  --nav-link-hover-color: #FDFCF3; /* Off-white for nav link hover */
  --name-color: #212121; /* Dark grey for name */
  --text-pink-color: #FE8EA8; /* Light pink for text */
  --footer-bg-color: #212121; /* Dark grey for footer */
  
  --active-link-bg-color: rgba(255, 100, 234, 0.161); /* Active link background color */
  --active-link-color: #FEAFC2; /* Active link color */
}

/* Light Mode Colors */
.light-mode {
  --background-color: #ffffff; /* Background color for sections */
  --text-color: #000000; /* Color for text */
  --link-color: #FE8EA8; /* Color for links */
  --button-color: #FE8EA8; /* Color for buttons */
  
  --photo-album-padding: 20px; /* Padding for photo album */
  --photo-grid-gap: 10px; /* Gap between photos */
  --photo-max-width: 100px; /* Max width for photos */
  --photo-expanded-width: 30vw; /* Expanded width for photos */
  --photo-expanded-video-width: 20vw; /* Expanded width for videos */
  --shadow-box-bg-color: #fdfcf3; /* Light background color for shadow box */
  --caption-color: #000000; /* Black color for captions */
  --shadow-box-border-radius: 15px; /* Border radius for shadow box */
  --shadow-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for shadow box */
  --rounded-image-max-height: 600px; /* Max height for rounded images */
  
  --code-box-bg-color: #FFF; /* White for code box */
  --code-text-color: #333; /* Dark grey for code text */
  --scrollbar-thumb-color: #FE8EA8; /* Light pink for scrollbar handle */
  --body-bg-color: #ffffff; /* White for body background */
  --header-bg-color: #FFC0CB; /* Light pink for header */
  --nav-link-color: #212121; /* Dark grey for nav links */
  --nav-link-hover-color: #FE8EA8; /* Light pink for nav link hover */
  --name-color: #212121; /* Dark grey for name */
  --text-pink-color: #FE8EA8; /* Light pink for text */
  --footer-bg-color: #e0e0e0; /* Light grey for footer */
  
  --active-link-bg-color: rgba(255, 100, 234, 0.161); /* Active link background color */
  --active-link-color: #FEAFC2; /* Active link color */
}


/* Base layer styles */
@layer base {
  * {
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    box-sizing: content-box; /* Set box-sizing to content-box */
    font-family: "Poppins", sans-serif; /* Apply Poppins font to all elements */
  }

  /* Define the gridUp animation */
  @keyframes gridUp {
    0% {
      opacity: 0; /* Start with no opacity */
      transform: translateY(20px); /* Start slightly below */
    }
    100% {
      opacity: 1; /* End with full opacity */
      transform: translateY(0); /* End at original position */
    }
  }

  .absolute-center {
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust to exact center */
  }

  /* Apply gridUp animation to elements with these classes */
  .sr01 {
    animation: gridUp 1s ease forwards; /* Apply animation */
  }
  .sr02 {
    animation: gridUp 1s ease forwards; /* Apply animation */
  }
  .sr03 {
    animation: gridUp 1s ease forwards; /* Apply animation */
  }
  .sr04 {
    animation: gridUp 1s ease forwards; /* Apply animation */
  }

  body {
    background: var(--background-color); /* Use the defined background color */
    transition: all 0.475s; /* Smooth transition for all changes */
  }

  *, html, body, a, button, span, p {
    font-family: "Poppins", sans-serif; /* Apply Poppins font to all elements */
  }

  ::selection {
    background: var(--pink-color); /* Background color for selected text */
    color: var(--white-color); /* Text color for selected text */
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
  }

  ::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent track background */
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px; /* Rounded scrollbar thumb */
    background: var(--pink-color); /* Thumb color */
  }

  .show {
    left: 0; /* Position to the left */
    transition: all 0.3s ease; /* Smooth transition */
  }

  #nav-menu {
    transition: 0.4s; /* Smooth transition */
  }

  .show_menu {
    left: 0 !important; /* Force position to the left */
  }

  a {
    transition: all 0.5s ease; /* Smooth transition */
    width: max-content; /* Adjust width to content */
  }

  .active-link {
    background-color: var(--active-link-bg-color); /* Background color for active link */
    color: var(--active-link-color) !important; /* Text color for active link */
    transition: all 0.5s ease; /* Smooth transition */
    width: max-content; /* Adjust width to content */
  }

  .btn__hover {
    transition: all 0.475s; /* Smooth transition */
  }

  .btn__hover::before {
    content: ""; /* Empty content for pseudo-element */
    position: absolute; /* Absolute positioning */
    top: 0; /* Align to top */
    left: 0; /* Align to left */
    transform: scaleX(0); /* Initial scale */
    transform-origin: 0 50%; /* Origin for transformation */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    border-radius: 0.5rem; /* Rounded corners */
    background: var(--white-color); /* Background color */
    transition: all 0.475s; /* Smooth transition */
    z-index: -1; /* Position behind other elements */
  }

  .btn__hover:hover::before {
    transform: scaleX(1); /* Scale up on hover */
  }

  /* Front Button Add styles to increase text size */
  .content h4 {
    font-size: 24px; /* Font size for h4 */
  }

  .content h2 {
    font-size: 36px; /* Font size for h2 */
  }

  .btn {
    font-size: 18px; /* Font size for button */
    padding: 10px 20px; /* Padding for button */
  }
}

/* CSS styles */

/* Style for the code box */
.code-box {
  background-color: var(--code-box-bg-color); /* Use global color for background */
  padding: 20px; /* Padding inside the box */
  border-radius: 5px; /* Rounded corners */
  overflow-x: auto; /* Enable horizontal scrolling */
  font-family: 'Courier New', Courier, monospace; /* Monospaced font */
  transition: max-height 0.3s ease; /* Smooth expansion transition */
  max-height: 100px; /* Set initial height */
  overflow: hidden; /* Hide overflow content */
  cursor: pointer; /* Pointer cursor on hover */
}

.code-box code {
  font-size: 14px; /* Font size for code text */
  color: var(--code-text-color); /* Use global color for text */
}

/* Style for the expanded code box */
.code-box.expanded {
  max-height: none; /* Remove max-height to expand */
}

/* -------------- Experience portal -------------- */
/* For WebKit/Blink browsers */
::-webkit-scrollbar {
  width: 12px; /* Width of scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color); /* Use global color for scrollbar handle */
  border-radius: 6px; /* Rounded corners for scrollbar handle */
}

/* -------------- Header for exterior pages -------------- */
* {
  margin: 0; /* Reset margin */
  padding: 0; /* Reset padding */
  list-style: none; /* Remove list styles */
  text-decoration: none; /* Remove text decorations */
}

body {
  background-color: var(--body-bg-color); /* Use global background color */
  color: var(--text-color); /* Use global text color */
  font-family: Arial, sans-serif; /* Font family */
}

.header {
  background-color: var(--header-bg-color); /* Use global background color */
  padding: 20px; /* Padding inside header */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between items */
  align-items: center; /* Center items vertically */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Box shadow for header */
}

.header nav ul {
  display: flex; /* Use flexbox */
  gap: 20px; /* Space between items */
}

.header nav ul li a {
  color: var(--nav-link-color); /* Use global color for nav links */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Uppercase text */
}

.header nav ul li a:hover {
  color: var(--nav-link-hover-color); /* Use global color on hover */
}

.header .name {
  color: var(--name-color); /* Use global color for name */
  font-weight: bold; /* Bold text */
  font-size: 1.25rem; /* Font size */
  margin-left: auto; /* Push name to the right */
}

.inner {
  padding: 20px; /* Padding inside inner section */
  text-align: center; /* Center align text */
}

.text-pink {
  color: var(--text-pink-color); /* Use global pink color */
}

.section-title {
  color: var(--text-pink-color); /* Use global pink color */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Bold text */
  text-align: center; /* Center align text */
  position: relative; /* Relative positioning */
  display: inline-block; /* Inline block display */
}

.section-title::after {
  content: 'Experiences'; /* Text for overlay */
  font-size: 4rem; /* Font size */
  color: rgba(254, 142, 168, 0.1); /* Light pink overlay color */
  position: absolute; /* Absolute positioning */
  left: 50%; /* Center horizontally */
  top: 50%; /* Center vertically */
  transform: translate(-50%, -50%); /* Adjust to exact center */
  z-index: -1; /* Send overlay behind title */
}

.portal-card {
  position: relative; /* Relative positioning */
  border-radius: 15px; /* Rounded corners */
  overflow: hidden; /* Hide overflow content */
  transition: transform 0.3s ease; /* Smooth transform transition */
}

.portal-card:hover {
  transform: scale(1.05); /* Scale up on hover */
}

.portal-card img {
  width: 100%; /* Full width */
  border-radius: 15px; /* Rounded corners */
}

.experience-info {
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Align to bottom */
  width: 100%; /* Full width */
  background: rgba(33, 33, 33, 0.8); /* Dark overlay background */
  color: var(--text-color); /* Use global text color */
  padding: 10px; /* Padding inside info box */
  text-align: center; /* Center align text */
  border-bottom-left-radius: 15px; /* Rounded bottom-left corner */
  border-bottom-right-radius: 15px; /* Rounded bottom-right corner */
}

.experience-overlay {
  position: absolute; /* Absolute positioning */
  top: 0; /* Align to top */
  left: 0; /* Align to left */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(33, 33, 33, 0.8); /* Dark overlay background */
  color: var(--text-color); /* Use global text color */
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  text-align: center; /* Center align text */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth opacity transition */
  border-radius: 15px; /* Rounded corners */
}

.portal-card:hover .experience-overlay {
  opacity: 1; /* Show overlay on hover */
}

footer {
  background-color: var(--footer-bg-color); /* Use global footer background color */
  color: var(--text-color); /* Use global text color */
  text-align: center; /* Center align text */
  padding: 20px 0; /* Vertical padding */
  margin-top: 20px; /* Margin at the top */
  border-top: 1px solid var(--text-pink-color); /* Pink border on top */
}

.text-container-list ul {
  list-style-position: outside; /* Bullet points outside list */
  text-align: left; /* Align text to the left */
  margin-left: 20px; /* Margin on the left */
}

.text-container-list li {
  text-align: left; /* Align text to the left */
}

.text-container {
  padding: 0 20px; /* Horizontal padding */
}

.text-container ul {
  list-style-type: disc; /* Disc style for bullet points */
  padding-left: 20px; /* Padding on the left */
}

.text-container ul li {
  margin-bottom: 10px; /* Margin between items */
}


/* CSS styles */

/* Style for the code box */
.code-box {
  background-color: var(--code-box-bg-color); /* Use global color for background */
  padding: 20px; /* Padding inside the box */
  border-radius: 5px; /* Rounded corners */
  overflow-x: auto; /* Enable horizontal scrolling */
  font-family: 'Courier New', Courier, monospace; /* Monospaced font */
  transition: max-height 0.3s ease; /* Smooth expansion transition */
  max-height: 100px; /* Set initial height */
  overflow: hidden; /* Hide overflow content */
  cursor: pointer; /* Pointer cursor on hover */
}

.code-box code {
  font-size: 14px; /* Font size for code text */
  color: var(--code-text-color); /* Use global color for text */
}

/* Style for the expanded box */
.code-box.expanded {
  max-height: none; /* Remove max-height to expand */
}

/* -------------- Experience portal -------------- */
/* For WebKit/Blink browsers */
::-webkit-scrollbar {
  width: 12px; /* Width of scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color); /* Use global color for scrollbar handle */
  border-radius: 6px; /* Rounded corners for scrollbar handle */
}

/* -------------- Header for exterior pages -------------- */
* {
  margin: 0; /* Reset margin */
  padding: 0; /* Reset padding */
  list-style: none; /* Remove list styles */
  text-decoration: none; /* Remove text decorations */
}

body {
  background-color: var(--body-bg-color); /* Use global background color */
  color: var(--text-color); /* Use global text color */
  font-family: Arial, sans-serif; /* Font family */
}

.header {
  background-color: var(--header-bg-color); /* Use global background color */
  padding: 20px; /* Padding inside header */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between items */
  align-items: center; /* Center items vertically */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Box shadow for header */
}

.header nav ul {
  display: flex; /* Use flexbox */
  gap: 20px; /* Space between items */
}

.header nav ul li a {
  color: var(--nav-link-color); /* Use global color for nav links */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Uppercase text */
}

.header nav ul li a:hover {
  color: var(--nav-link-hover-color); /* Use global color on hover */
}

.header .name {
  color: var(--name-color); /* Use global color for name */
  font-weight: bold; /* Bold text */
  font-size: 1.25rem; /* Font size */
  margin-left: auto; /* Push name to the right */
}

.inner {
  padding: 20px; /* Padding inside inner section */
  text-align: center; /* Center align text */
}

.text-pink {
  color: var(--text-pink-color); /* Use global pink color */
}

.section-title {
  color: var(--text-pink-color); /* Use global pink color */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Bold text */
  text-align: center; /* Center align text */
  position: relative; /* Relative positioning */
  display: inline-block; /* Inline block display */
}

.section-title::after {
  content: 'Experiences'; /* Text for overlay */
  font-size: 4rem; /* Font size */
  color: rgba(254, 142, 168, 0.1); /* Light pink overlay color */
  position: absolute; /* Absolute positioning */
  left: 50%; /* Center horizontally */
  top: 50%; /* Center vertically */
  transform: translate(-50%, -50%); /* Adjust to exact center */
  z-index: -1; /* Send overlay behind title */
}

.portal-card {
  position: relative; /* Relative positioning */
  border-radius: 15px; /* Rounded corners */
  overflow: hidden; /* Hide overflow content */
  transition: transform 0.3s ease; /* Smooth transform transition */
}

.portal-card:hover {
  transform: scale(1.05); /* Scale up on hover */
}

.portal-card img {
  width: 100%; /* Full width */
  border-radius: 15px; /* Rounded corners */
}

.experience-info {
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Align to bottom */
  width: 100%; /* Full width */
  background: rgba(33, 33, 33, 0.8); /* Dark overlay background */
  color: var(--text-color); /* Use global text color */
  padding: 10px; /* Padding inside info box */
  text-align: center; /* Center align text */
  border-bottom-left-radius: 15px; /* Rounded bottom-left corner */
  border-bottom-right-radius: 15px; /* Rounded bottom-right corner */
}

.experience-overlay {
  position: absolute; /* Absolute positioning */
  top: 0; /* Align to top */
  left: 0; /* Align to left */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(33, 33, 33, 0.8); /* Dark overlay background */
  color: var(--text-color); /* Use global text color */
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  text-align: center; /* Center align text */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth opacity transition */
  border-radius: 15px; /* Rounded corners */
}

.portal-card:hover .experience-overlay {
  opacity: 1; /* Show overlay on hover */
}

footer {
  background-color: var(--footer-bg-color); /* Use global footer background color */
  color: var(--text-color); /* Use global text color */
  text-align: center; /* Center align text */
  padding: 20px 0; /* Vertical padding */
  margin-top: 20px; /* Margin at the top */
  border-top: 1px solid var(--text-pink-color); /* Pink border on top */
}

.text-container-list ul {
  list-style-position: outside; /* Bullet points outside list */
  text-align: left; /* Align text to the left */
  margin-left: 20px; /* Margin on the left */
}

.text-container-list li {
  text-align: left; /* Align text to the left */
}

.text-container {
  padding: 0 20px; /* Horizontal padding */
}

.text-container ul {
  list-style-type: disc; /* Disc style for bullet points */
  padding-left: 20px; /* Padding on the left */
}

.text-container ul li {
  margin-bottom: 10px; /* Margin between items */
}

/* --------------Style for "Here" links -------------- */
.text-container a {
  color: var(--link-color); /* Use global link color */
}

.padded-heading {
  padding: 20px; /* Padding around heading */
  text-align: center; /* Center align text */
}

.image-container {
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflow content */
}

.image-container img {
  width: 100%; /* Full width */
  height: auto; /* Auto height */
  display: block; /* Block display */
}

/* ----------------- Projects -------------- */

body {
  margin: 0;
  padding: 0;
}

#photo-album {
  padding: var(--photo-album-padding); /* Use variable for padding */
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.photo-grid {
  display: flex;
  justify-content: center;
  gap: var(--photo-grid-gap); /* Use variable for gap */
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.photo img, .photo video {
  max-width: var(--photo-max-width); /* Use variable for max width */
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.photo img.expanded, .photo video.expanded {
  max-width: var(--photo-expanded-width); /* Use variable for expanded width */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: none;
}

.photo video.expanded {
  max-width: var(--photo-expanded-video-width); /* Use variable for video expanded width */
}

.shadow-box {
  border-radius: var(--shadow-box-border-radius); /* Use variable for border radius */
  box-shadow: var(--shadow-box-shadow); /* Use variable for box shadow */
  padding: 20px;
  background-color: var(--shadow-box-bg-color); /* Use variable for background color */
  text-align: center;
  margin: 20px auto; /* Centers the box horizontally */
  max-width: 90%; /* Set a maximum width for larger screens */
  width: 100%; /* Full width in smaller viewports */
  display: flex;
  flex-direction: column; /* Column layout for smaller screens */
  align-items: center; /* Center items horizontally */
  gap: 20px; /* Space between images */
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: var(--shadow-box-border-radius); /* Use variable for border radius */
  overflow: hidden; /* Ensure images do not overflow their container */
}

.rounded-image {
  display: block; /* Display images as block elements */
  width: 100%; /* Ensure images take full width of their container */
  height: auto; /* Maintain aspect ratio */
  max-height: var(--rounded-image-max-height); /* Use variable for max height */
  object-fit: cover; /* Ensure images cover the container */
}

.caption {
  margin-top: 10px; /* Space between image and caption */
  font-size: 16px;
  color: var(--caption-color); /* Use variable for caption color */
}

/* For larger screens */
@media (min-width: 769px) {
  .shadow-box {
    flex-direction: row; /* Arrange images in a row */
    align-items: flex-start; /* Align items to the start vertically */
    justify-content: space-around; /* Space around images */
  }

  .image-wrapper {
    width: 48%; /* Control the size of images in the container */
  }

  .rounded-image {
    display: block; /* Display images as block elements */
    width: 100%; /* Ensure images take full width of their container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure images cover the container */
  }
}

/* --------------skills / about - General styling for the sections -------------- */
section {
  padding: var(--section-padding); /* Use variable for padding */
  margin-bottom: var(--section-margin-bottom); /* Use variable for margin bottom */
}

.about-section, .skill-section {
  background-color: var(--background-color); /* Use variable for background color */
}

.topic-header {
  font-size: 1.8em; /* Adjust this size as needed */
  text-transform: none; /* Ensure text is not in all caps */
}

.content-text {
  font-size: 1em; /* Adjust this size as needed */
  color: var(--text-color); /* Use variable for text color */
  text-transform: none; /* Ensure text is not in all caps */
}

.pink-link {
  color: var(--link-color) !important; /* Use variable for link color */
  text-transform: none; /* Ensure text is not in all caps */
}

/* Responsive styles to prevent overlap */
@media (max-width: 768px) {
  .about-section, .skill-section {
      padding: 2rem 1rem; /* Adjust padding for smaller screens */
  }
  
  .skill-section {
      margin-top: 2rem; /* Margin top for skill section */
  }
}

/* Specific styling for the toggle buttons */
button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--button-color); /* Use variable for button color */
  font-size: 1rem;
  font-weight: medium;
}

button span {
  transition: transform 0.3s;
}

button span.rotate {
  transform: rotate(180deg);
}

/* Hidden sections */
.hidden {
  display: none;
}

/* Profile image container styling */
.profile-image-container {
  width: var(--profile-image-width); /* Use variable for width */
  height: var(--profile-image-height); /* Use variable for height */
  overflow: hidden;
  position: relative;
}

/* Ensure images fill the container */
.profile-image-container img {
  width: 100%; /* Ensure the image fills the container horizontally */
  height: 100%; /* Ensure the image fills the container vertically */
  object-fit: cover; /* Maintain aspect ratio while filling the container */
}

/* Adjusted width for the text column */
.profile-text {
  flex: 1; /* Allow the text column to grow */
}

/* Adjusted height for the image container */
.profile-image-container {
  width: 100%; /* Take up the full width of the container */
  max-width: var(--profile-image-max-width); /* Use variable for max width */
  height: var(--profile-image-height-large); /* Use variable for height on larger screens */
}